import React from "react";

import PageContent from '../../PageContent'

import { ajax ,showResultMessage,isNull,isNotNull,setStoreItem,getStoreItem} from '../../common';

import {UIDataTableView} from '../../uicomponents/UIDataComponentView';

import UIFormView from '../../uicomponents/UIFormView';

import { Link } from 'react-router-dom';

import UIToolbar from '../../uicomponents/UIToolbar';

import ImportProductUITabPanel from './ImportUIDataFilePanel';

import ExportProductUITabPanel from './ExportUIDataFilePanel';
/** 
 *产品UI标签页管理
*/
export default class ProductUITabManageApp extends React.Component {

    state = {
		tabSearchValues : getStoreItem('uiTabSearchValues',{}),
	}

	onTabSearchValueChange = (values) => {
		this.setState({tabSearchValues : values});
		setStoreItem('uiTabSearchValues',values);
	}

	render() {

        /**路由设置 */
		const pageContentMap = {
			'/': {
				text: '',
				icon: '',
				getComponent: (owner, props) => {
					return (<ProductUITabListPanel {...props} 
						tabSearchValues={this.state.tabSearchValues} 
						onTabSearchValueChange={this.onTabSearchValueChange}
						key="uiTabList" 
						
						/>
						);
				}
			},
			'/editUITabItems': {
				text: '编辑标签页字段',
				icon: 'edit',
				getComponent: (owner, props) => {
					return (<EditProductUITabItemListPanel {...props} key="editTabItems" />);
				}
			},
			'/importDataFiles': {
				text: '导入UI标签',
				icon: 'sign-in-alt',
                getComponent: (owner, props) => {
                    return <ImportProductUITabPanel {...props} importURL="PRODUCT/UI/import/importUITabFile/" pageTitle="导入UI标签" key="importTabs"/>;
                }
			},
			'/exportDataFiles': {
				text: '导出UI标签',
				icon: 'sign-out-alt',
                getComponent: (owner, props) => {
                    return <ExportProductUITabPanel {...props} exportURL="PRODUCT/UI/export/exportUITabFile/" pageTitle="导出UI标签" key="exportTabs"/>;
                }
			},
        }

		return (
			<PageContent {...this.props} pageInstance={this} contentMap={pageContentMap}>
			</PageContent>
		);
	}
}



/** 
 * 产品UI标签页列表
*/
class ProductUITabListPanel extends React.Component {

	constructor(props) {
		super(props);
		this.state = {
            formTitle: '',
		}
    }

	actionHandler = (actionEvent) => {

		const { selectTabIds, tabListRef, tabFormRef } = this;

		return {
			refresh : () => {
				tabListRef.loadData();
			},
			addNew : () => {
				this.setState({ formTitle: '新增产品UI标签页'});
				setTimeout(() => {
					tabFormRef.openModal(() => {
						const initParams = getStoreItem('uiTabSearchValues',{});
						if(isNotNull(initParams['domainId'])){
							tabFormRef.setFormData({domainId : initParams['domainId']});
						}
					});
				});
			},
			doEdit : () => {
				this.setState({ formTitle: '编辑产品UI标签页' });
				setTimeout(() => {
					tabFormRef.openModal(() => {
						tabFormRef.setFormData(actionEvent.params);
					});
				});
			},
			doDelete : () => {
				let selectedIds = null;

				if (actionEvent.params != null) {
					selectedIds = [actionEvent.params.id];
				}
				else {
					selectedIds = selectTabIds;
				}

				ajax('PRODUCT/UI/productUITab/batchDelete', { ids: selectedIds }, (data) => {
					tabListRef.loadData();
				});
			},
			doSave : () => {
				tabFormRef.getFormData((formData) => {
					
					ajax('PRODUCT/UI/productUITab/save', formData, (data) => {
						tabFormRef.closeModal();
						tabListRef.loadData();
						showResultMessage({
							success: true,
							message: 'message.saveSuccess',
						});
					});
				});
			}
		};
	}

	render() {

		const tableProps = {
            ref: (inst) => { this.tabListRef = inst },
            history : this.props.history,
			actionHandler: this.actionHandler,
			title : "UI标签",
			extra : (<UIToolbar history={this.props.history} actionGroupId="productUIDataPanelActionGroup" actionHandler={this.actionHandler}/>),
			actionGroupId: 'productUITabListActionGroup',
			rowActionGroupId: 'productUITabRowActionGroup',
			tableConfigId: 'productUITabTable',
			dataUrl: 'PRODUCT/UI/productUITab/query',
			selectMode: 'multi',
            searchFormId: 'productUITabSearchForm',
            initSearchValues : this.props.tabSearchValues,
			autoLoad: true,
			setToolbarState: (topToolBar, selectedIds) => {
				if (selectedIds.length > 0) {
					topToolBar.enable('delete');
					topToolBar.enable('edit');
				}
				else {
					topToolBar.disable('delete');
					topToolBar.disable('edit');
				}
			},
			onSelectChange:
				(selectRowKeys) => {
					this.selectTableIds = selectRowKeys;
				}
            ,
            onSearchData : (changedValues) => {
				
				if(this.props.onTabSearchValueChange){
					this.props.onTabSearchValueChange(changedValues)
				}
			}
		};

		const tableFormProps = {
			ref: (inst) => { this.tabFormRef = inst },
			formConfigId: 'productUITabForm',
			actionGroupId: 'saveActionGroup',
			actionHandler: this.actionHandler,
			inPop: true,
			destroyOnClose: true,
			title: this.state.formTitle,
		};

		return (
			<UIDataTableView {...tableProps}>
				<UIFormView {...tableFormProps} />
			</UIDataTableView>
		);
	}
}

/**
 * 编辑标签页字段
 */
class EditProductUITabItemListPanel extends React.Component {
    constructor(props) {
		super(props);
		this.state = {
			formTitle: '',
			pageTitle : '',
			tab : null,
		}
	}
	
	componentDidMount(){
		this.tab = this.props.location.state;
		this.setState({pageTitle : '编辑[' + this.tab.code +   ']标签页'});
		this.loadTabItems(this.tab.id);
	}

    loadTabItems = (tabId) => {
		
        this.tabItemListRef.loadData({tabId : tabId});
    }

    actionHandler = (actionEvent) => {

		const { selectIds,tabItemEditFormRef, tabItemListRef,tab } = this;

		return {
			refresh : () => {
				this.loadTabItems(tab.id);
			},
			addNew : () => {
				this.setState({ formTitle: '添加标签页'});
				
				setTimeout(() => {
					tabItemEditFormRef.openModal();
				});
			},
			doEdit : () => {
				this.setState({ formTitle: '编辑标签页',tabItem : actionEvent.params  });
				
				setTimeout(() => {
					tabItemEditFormRef.openModal(() => {
						tabItemEditFormRef.setFormData(actionEvent.params);
					});
				});
			},
			doDelete : () => {
				let selectedIds = null;

				if (isNull(actionEvent.params) !== true) {
					selectedIds = [actionEvent.params.id];
				}
				else {
					selectedIds = selectIds;
				}

				ajax('PRODUCT/UI/productUITabItem/batchDelete', { ids: selectedIds }, (data) => {
					this.loadTabItems(tab.id);
				});
			},
			doSave : () => {

				if(tabItemEditFormRef.isOpend()){
					tabItemEditFormRef.getFormData((formData) => {
						formData.tabId = tab.id;
						ajax('PRODUCT/UI/productUITabItem/save', formData, (data) => {
							tabItemEditFormRef.closeModal();
							this.loadTabItems(tab.id);
							showResultMessage({
								success: true,
								message: 'message.saveSuccess',
							});
						});
					});
				}
								
			},
			moveDown : () => {
				const rowData = actionEvent.params;
				if(rowData.sortIndex < tabItemListRef.getListData().length){
					rowData.sortIndex = rowData.sortIndex + 1;
					ajax('PRODUCT/UI/productUITabItem/save',rowData,(data) => {
						this.loadTabItems(tab.id);
					});
				}
			},
			moveUp : () => {
				const rowData = actionEvent.params;
				if(rowData.sortIndex > 1){
					rowData.sortIndex = rowData.sortIndex - 1;
					ajax('PRODUCT/UI/productUITabItem/save',rowData,(data) => {
						this.loadTabItems(tab.id);
					});
				}
			},
		};
	}

	render () {

		const tableProps = {
			bordered : false,
			history : this.props.history,
			title : this.state.pageTitle,
			ref: (inst) => { this.tabItemListRef = inst },
			actionHandler: this.actionHandler,
			actionGroupId: 'productUITabItemListActionGroup',
			rowActionGroupId: 'productUITabItemRowActionGroup',
			tableConfigId: 'productUITabItemTable',
			dataUrl: 'PRODUCT/UI/productUITabItem/query',
			selectMode: 'multi',
			autoLoad: false,
			setToolbarState: (topToolBar, selectedIds) => {
				if (selectedIds.length > 0) {
					topToolBar.enable('delete');
					topToolBar.enable('edit');
				}
				else {
					topToolBar.disable('delete');
					topToolBar.disable('edit');
				}
			},
			onSelectChange:
				(selectRowKeys) => {
					this.selectIds = selectRowKeys;
				}
			,
		};

		return (
			<UIDataTableView extra={<Link to="/">返回</Link>} {...tableProps}>
				<UIFormView formConfigId="productUITabItemForm" 
					inPop={true} destroyOnClose={true} title={this.state.formTitle} ref={(inst) => this.tabItemEditFormRef = inst} 
					actionGroupId={'saveActionGroup'} actionHandler={this.actionHandler}
				/>
			</UIDataTableView>
		);
	}
}